<template>
  <div id="policy">
    <!-- 顶部 -->
      <div class="top">
        <div class="center tip">
          <span class="left">欢迎访问郑州高新技术产业开发区信用建设管理平台</span>
          <span class="right">
            <span>管理后台</span>
            <span>意见建议</span>
          </span>
        </div>
      </div>
       <!-- 顶部导航搜索 -->
    <div class="bgsearch">
      <div class="center">
          <div class="search">
            <input type="text" placeholder="请输入企业名或组织机构代码">
            <button></button>
          </div>
      </div>
    </div>
     <!-- 导航栏 -->
      <div class="nav">
        <div class="center">
          <div class="con">
            <router-link tag="p"  to="index"><span>首页</span></router-link>
            <router-link tag="p"  to="policy"><span>政策法规</span></router-link>
            <router-link tag="p" class="active" to="build"><span>信用建设</span></router-link>
            <router-link tag="p" to="map"><span>信用地图</span></router-link>
            <router-link tag="p" to="responsibility"><span>信用责任</span></router-link>
            <router-link tag="p" to='publicity'><span>信息公示</span></router-link>
          </div>
        </div>
      </div>
      <!-- 当前位置 -->
      <div class="current">
        <div class="center">
          <img src="../../assets/image/icon_current.png" alt="">
          <span>当前位置：<router-link to="index" tag="span">首页</router-link>></span><span class="red">政策法规</span>
        </div>
      </div>
       <!-- 新闻轮播图 -->
    <div class="news">
      <div class="center">
        <el-carousel :interval="3000" arrow="always" :autoplay= 'false' indicator-position="none">
          <el-carousel-item v-for="item in 4" :key="item">
              <div class="swipercon">
                <div class="swleft">
                  <img src="../../assets/image/news.png" alt="">
                </div>
                <div class="swright">
                  <div class="title">2018年全国各级信用信息共享平台观摩培训活动在XX开幕</div>
                  <div class="date">2018-09-11</div>
                  <div class="content">
                    9月10日，“2018年全国各级信用信息共享平台和信用门户网站建设观摩
                    培训活动”在XXXXXXXXXX掀开帷幕。本促活动由国家发展改革委指导，
                    国家信息中心与国家公共信用信息中心主办，XX市人民政府和XXXX省经
                    济和信息化委员会协办，XXX市发改委承办。按照会议日程，本次活动将
                    分预选和观......
                    济和信息化委员会协办，XXX市发改委承办。按照会议日程，本次活动将
                    分预选和观......
                    济和信息化委员会协办，XXX市发改委承办。按照会议日程，本次活动将
                    分预选和观......
                  </div>
                  <div class="lookdetail"> 
                    <span>查看详情</span>
                  </div>
                </div>
              </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 诚信背景图 -->
    <div class="chengxin"></div>
    <!-- 新闻详情 -->
    <div class="boxbanner">
      <div class="center cenbox">
        <div class="left">
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <li class="li"> <span>国家知识产权局：运用大数据提升打击知识产权侵权假冒行为精准度</span> <span >【2018-12-6】</span></li>
          <!-- 分页 -->
          <div class="pgfenye">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              
              layout="total, prev, pager, next, jumper"
              :total="40">
            </el-pagination>
          </div>
        </div>
        <div class="right">
          <div class="rt">
            <div class="rtitle">
              <span>站内查询</span>
            </div>
            <div class="three">
              <span class="active">信用信息</span>
              <span>“双公示”</span>
              <span>站内文章</span>
            </div>
            <el-input placeholder="请输入内容"></el-input>
            <div class="btn">
              <button>查询</button>
            </div>
          </div>
          <div class="rb">
            
          </div>
        </div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
import foot from './home/foot.vue'
export default {
  name: 'policy',
  components: {
    foot
  },
  data () {
    return {
      currentPage: 1
    };
  },
  methods: {
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};
</script>

<style lang="scss">
  #policy {
    .center {
      width: 1200px;
      margin: 0 auto;
    }
    .top {
      width: 100%;
      height:40px;
      background:rgba(241,241,241,1);
      .tip {
        display: flex;
        justify-content: space-between;
        span {
          font-size:16px;
          font-weight:400;
          color:rgba(56,56,56,1);
          line-height: 40px;
          &.right {
            span:first-child {
              padding-right: 20px;
              border-right: 2Px solid #cccccc;
            }
            span:last-child {
              padding-left: 18px;
            }
          }
        }
      }
    }
    // ------------------------
      .bgsearch {
      width: 100%;
      height: 300px;
      background-image: url(../../assets/image/banner1.jpg);
      background-position: center center;
      position: relative;
      background-repeat: no-repeat;
      // padding-top: 450px;
      .center {
        position: relative;
        .search {
          display: inline-block;
          position: absolute;
          top: 230px;
          left: 696px;
          width:435px;
          height:51px;
          input {
            position: absolute;
            left: 0;
            top: 0;
            width:435px;
            height:51px;
            box-sizing: border-box;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
            opacity:0.85;
            border-radius:20px;  
            padding-right: 70px;
            padding-left: 20px;
          }
          button {
            position: absolute;
            right: -20px;
            top: 0;
            width:55px;
            height:51px;
            background-color: #db4444;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background-imagebackground-image: url(../../assets/image/search.png);
            background-position: center center;
            background-repeat: no-repeat;
          }
        }
      }
   }
   .nav {
        width: 100%;
        height:67px;
        background:rgba(213,35,36,1);
        position: relative;
        margin-top: -1px;
        .con {
          display: flex;
          justify-content: flex-start;
          p {
            width: 190px;
            height: 67px;
            font-size: 20px;
            color: white;
            line-height: 67px;
            text-align: center;
            box-sizing: border-box;
            border-left: 2px solid white;
            &:last-child {
              border-right: 2px solid white;
            }
            &.active {
              background-color: white;
              span {
                color: #D52324;
                border-bottom: 1px solid #D52324; 
              }
            }
          }
      }
    }
    .current {
      height:50px;
      background:rgba(191,190,190,1);
      margin-bottom: 28px;
      img {
        line-height: 50px;
      }
      span {
        line-height: 50px;
        &.red {
          color: #d52324;
        }
      }
    }
    // 新闻
    .news {
    .title  {
      text-align: center;
    }
    .el-carousel__container {
      height:348px;
      background:rgba(241,241,241,1);
      .el-carousel__arrow {
        width:40px;
        height:102px;
        background:rgba(245,151,30,1);
        border-radius: 0;
        .el-icon-arrow-right {
          font-size: 36px;
        }
        .el-icon-arrow-left {
          font-size: 36px;
        }
      }
      .swleft {
        position: absolute;
        width:500px;
        height:326px;
        left: 62px;
        top: 10px;
        img {
          width: 100%;
        }
      }
      .swright {
        position: absolute;
        width: 560px;
        height: 326px;
        right: 62px;
        top: 10px;
        .title {
          width:550px;
          height:20px;
          font-size:20px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(56,56,56,1);
        }
        .date {
          color: #B6B5B5;
          font-size:16px;
          text-align: right;
          height: 68px;
          line-height: 68px;
        }
        .content {
          width:547px;
          font-size:16px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(108,107,107,1);
          line-height: 30px;
          overflow:hidden; 
          text-overflow:ellipsis;
          display:-webkit-box; 
          -webkit-box-orient:vertical;
          -webkit-line-clamp:6; 
        }
        .lookdetail {
          text-align: right;
          position: absolute;
          right: 0;
          bottom: 0;
          span {
            font-size:16px;
            color: #6C6B6B;
            cursor: pointer;
          }
        }
      }
    }
  }
  .chengxin {
    width: 100%;
    height: 90px;
    background-image: url(../../assets/image/home_banner_2.png);
    background-position: center center;
    background-repeat: no-repeat; 
    margin-top: 39px;
    margin-bottom: 45px;
  }
  .boxbanner {
    margin-bottom: 50px;
    .cenbox {
       display: flex;
       justify-content: space-between;
      .left {
        width:836px;
        height:1120px;
        border:1px solid rgba(226,223,223,1);
        border-top: 2px solid #D52324;
        .li {
          height: 65px;
          padding-left: 20px;
          padding-right: 10px;
          display: flex;
          justify-content: space-between;
          position: relative;
          border-bottom: 1px dashed #6C6B6B;
          color: #383838;
          &::before {
            content: '';
            position: absolute;
            left: 7px;
            top: 29px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #6C6B6B;
          }
          &:hover {
            color: #D52324;
            &::before {
            content: '';
            position: absolute;
            left: 7px;
            top: 29px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #D52324;;
          }
          }
          span {
            line-height: 65px; 
          }
        }
        .pgfenye {
          text-align: right;
          margin-right: 20px;
          padding-top: 20px;
        }
      }
      .right {
        .rt {
          width:337px;
          height:271px;
          background:rgba(255,255,255,1);
          border:1px solid rgba(154,153,153,1);
          box-shadow:0px 1px 2px 0px rgba(108,107,107,0.5);
          border-top: 2px solid #D52324;
          .rtitle {
            height: 32px;
            background:linear-gradient(0deg,rgba(226,225,225,1),rgba(255,255,255,1));
            box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.35);
            span {
              display: inline-block;
              width:190px;
              height:32px;
              font-size:18px;
              color: white;
              padding-left: 28px;
              line-height: 32px;
              background:linear-gradient(0deg,rgba(213,35,36,1),rgba(213,35,36,1),rgba(233,232,232,1));
            }
          }
          .three {
            margin-top: 36px;
            margin-bottom: 32px;
            display: flex;
            justify-content: space-around;
            span {
              height:28px;
              padding: 0 6px;
              background:#e2e1e1;
              &.active {
                background:#D52324;
                color: white;
              }
            }
          }
          .el-input {
            width: 256px;
            margin-left: 40px;
            margin-bottom: 34px;
          }
          .btn {
            text-align: center;
            button {
              width:98px;
              height:29px;
              background:rgba(213,35,36,1);
              border-radius:5px;
              cursor: pointer;
              color: white;
            }
          }
        }
        .rb {
          margin-top: 45px;
          width:338px;
          height:735px;
          background-image: url(../../assets/image/imge_.png);
          background-position: left top;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>
